<template>
    <div id="query_train_res" class="absolute">
      <header class="mui-bar mui-bar-nav">
        <a class=" mui-icon  mui-pull-left  arr_left" @tap="clese_this">
        </a>
        <h1 class="mui-title">火车查询结果</h1>
      </header>
      <div class="mui-content bg_gree">
        <div class="res_list" >
          <div class="item" v-for="(i,k) in list">
            <div class="block line1">
              <span>{{i.train_no}}</span>
              <span><i class="icon_img guo" style=""></i> {{i.start_station}} <div>{{i.start_time}}</div></span>
              <span> {{i.run_time}}</span>
              <span><i class="icon_img zhong" style=""></i> {{i.end_station}} <div>{{i.end_time}}</div></span>
            </div>
            <div class="block line2">
              <span v-for="(i2,k2) in i.price_list">{{i2.price_type}}：{{i2.price}}</span>
            </div>
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "query_train_res",
      props:[
        'list'
      ],
      data(){
          return{

          }
      },
      methods:{
          clese_this(){
           this.$emit("close_res")
          }
      }
    }
</script>




<style scoped>
.guo{
  background-image: url(../../../assets/images/query/train_list/1.png);
}
.zhong{
  background-image: url(../../../assets/images/query/train_list/2.png);
}
#query_train_res{
  height: 100%;
}
  .main_box {
    width: 14.72rem;
    margin-left: 0.64rem;
    height: 100%;
    box-shadow: 0 0 0.2133rem #ddd;
    border-radius: 0.256rem;
    overflow: hidden;
    padding-bottom: 0.8533rem;
    margin-top: 0.64rem;
  }
  .main_box .title {
    width: 100%;
    height: 1.8347rem;
    line-height: 1.8347rem;
    text-align: center;
    background-color: #1c83fc;
    color: #fff;
  }
  .main_box .body {
    padding-top: 0.64rem;
  }
  .main_box .body .input_box {
    height: 1.792rem;
    line-height: 1.792rem;
    width: 12.8rem;
    margin-left: 0.9387rem;
    border-bottom: 1px solid #dcdcdc;
  }
  .main_box .body .input_box .input_name {
    font-size: 0.6827rem;
    width: 3.2rem;
    display: inline-block;
  }
  .main_box .body .input_box .input {
    font-size: 0.6827rem;
    width: 9.088rem;
    margin: 0;

    padding: 0;
    border: none;
  }
  .main_box .query_btn {
    width: 12.8rem;
    margin-left: 0.9387rem;
    margin-top: 1.4933rem;
    border-color: #1c83fc;
    color: #1c83fc;
  }
  .bg_blue {
    background-color: #1c83fc !important;
    color: #fff;
  }
  .bg_gree {
    background-color: #f6f6f6 !important;
  }
  .weather_res {
    padding: 0.64rem;
  }
  .weather_res .panel {
    width: 100%;
    min-height: 3.072rem;
    background-color: #fff;
    border-radius: 0.256rem;
    margin-bottom: 0.4267rem;
    padding-bottom: 0.4267rem;
    padding-top: 0.4267rem;
  }
  .weather_res .panel .title {
    color: #1c83fc;
  }
  .weather_res .panel .icon_img2 {
    width: 2.3893rem;
    height: 2.3893rem;
    float: left;
    margin-left: 0.8533rem;
  }
  .weather_res .panel .icon_img2 img {
    width: 100%;
  }
  .weather_res .panel .right_info {
    width: 7.68rem;
    float: right;
    color: #353535;
    line-height: 2.3893rem;
    font-size: 0.768rem;
    margin-right: 0.8533rem;
    text-align: right;
  }
  .weather_res .panel .right_info .week {
    float: left;
  }
  .weather_res .break {
    padding-left: 0.8533rem;
    padding-top: 0.8533rem;
  }
  .weather_res .break .title {
    font-size: 0.6827rem;
  }
  .weather_res .break p {
    font-size: 0.4693rem;
  }
  .weather_res .break p .break_date {
    float: right;
    margin-right: 0.8533rem;
  }
  .weather_res .top_panel .date {
    height: 1.7067rem;
    line-height: 1.7067rem;
    font-size: 0.6827rem;
    text-align: center;
    color: #353535;
  }
  .weather_res .top_panel .icon_img {
    margin-left: 0.8533rem;
    width: 4.2667rem;
    height: 4.2667rem;
    float: left;
  }
  .weather_res .top_panel .icon_img img {
    width: 100%;
  }
  .weather_res .top_panel .temp {
    float: right;
    color: #353535;
    font-size: 1.4933rem;
    margin-right: 0.8533rem;
    margin-top: 0.64rem;
  }
  .weather_res .top_panel .temp .address {
    margin-top: 0.4267rem;
    text-align: right;
    font-size: 0.8747rem;
  }
  .weather_res .top_panel .bottom {
    font-size: 0.64rem;
    line-height: 1.28rem;
    height: 1.28rem;
    color: #353535;
    clear: both;
    padding-left: 0.8533rem;
  }
  .res_list {
    color: #353535;
  }
  .res_list .item {
    width: 16rem;
    padding-left: 0.64rem;
    padding-right: 0.64rem;
    font-size: 0.5973rem;
    padding-top: 0.4267rem;
    padding-bottom: 0.4267rem;
    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;
  }
  .res_list .item .line1 span:nth-child(1) {
    font-size: 0.5973rem;
    color: #000;
  }
  .res_list .item .line1 span:nth-child(2) {
    font-size: 0.5547rem;
    color: #000;
  }
  .res_list .item .line1 span:nth-child(2) div {
    font-size: 0.4693rem;
  }
  .res_list .item .line1 .icon_img {
    display: inline-block;
    width: 0.5547rem;
    height: 0.5547rem;
    background-size: 100% 100%;
    vertical-align: middle;
  }
  .res_list .item .line1 span:nth-child(3) {
    font-size: 0.4693rem;
    color: #aaa;
  }
  .res_list .item .line1 span:nth-child(4) {
    font-size: 0.5547rem;
    color: #000;
  }
  .res_list .item .line1 span:nth-child(4) div {
    font-size: 0.4693rem;
  }
  .res_list .item .line2 span {
    font-size: 0.512rem;
  }
  .res_list .item .block {
    overflow: hidden;
  }
  .res_list .item .block span {
    float: left;
    width: 25%;
  }
  .air_res_list .item {
    background-color: #fff;
    padding: 0.2133rem 0;
    width: 14.72rem;
    min-height: 2.1333rem;
    margin-left: 0.64rem;
    margin-top: 0.4267rem;
    position: relative;
  }
  .air_res_list .item .block {
    margin-left: 0.4267rem;
    margin-top: 0.4267rem;
    overflow: hidden;
  }
  .air_res_list .item .block .time {
    color: #353535;
    float: left;
  }
  .air_res_list .item .block .time span {
    font-size: 1.0667rem;
  }
  .air_res_list .item .block .center {
    padding-top: 0.384rem;
    padding-left: 0.64rem;
    padding-right: 0.64rem;
  }
  .air_res_list .item .right {
    position: absolute;
    right: 0.4267rem;
    top: 0.8533rem;
    color: #aaa;
    font-size: 0.64rem;
    text-align: center;
  }
  .air_res_list .item .bottom {
    margin-left: 0.4267rem;
  }

  .absolute{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
z-index: 10001;
  }
  .ptsp_top_stats {
    height: 20px;
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
  }

  .mui-action-back {
    height: 44px;
    width: 44px;
  }

  .mui-action-back img {
    width: 100%;
  }



  .mui-content {
    padding-bottom: 100px;
    padding-top: 44px !important;
  }

  .arr_left {
    background-image: url(../../../assets/images/ptsp/left_arr_03.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .mui-title {
    font-size: 0.768rem;
  }

  .mui-bar-nav a {
    font-size: 0.5973rem;
    color: #888888;
    line-height: 44px;
  }

  html,body,.mui-content{
    height: 100%;
  }
</style>
